<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../css/public.css" />
		<link rel="stylesheet" href="../../layui/css/layui.css" />
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="table-search-fieldset">
					<form class="layui-form" action="" id="searchDataSupp">
						<div class="layui-form-item">
							<div style="text-align: center; margin-bottom: -10px;">
								<div class="layui-inline">
									<label class="layui-form-label" style="width: 211px;">请输入供货商相关信息进行查询：</label>
									<div class="layui-input-inline">
										<input type="text" class="layui-input" autocomplete="off"  id="vendorSearchCriteriaData"/>
									</div>
								</div>
								<div class="layui-inline">
									<button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="searchInfoBySupplier" id="searchInfoBySupplier">
										<i class="layui-icon"></i>
										搜 索
									</button>
								</div>
							</div>
						</div>
					</form>
				</fieldset>
				<fieldset class="table-search-fieldset" style="margin-top: 20px;">
					<div id="btnList" style="display: none;">
						<button type="button" data-method="offset" data-type="auto" id="add" lay-event="add" class="layui-btn layui-btn-normal layui-btn-sm">增加</button>
					</div>
					<div style="margin: 10px 10px 10px 0px">
						<div style="position: relative;">
							<table class="layui-hide" id="customerInfo" lay-filter="customerInfo"></table>
						</div>
					</div>
				</fieldset>
			</div>
		</div>

		<!--增加客户-->
		<div id="addCustomer" style="display: none; padding: 20px;">
			<form class="layui-form">
				<div class="layui-form-item">
                    <label class="layui-form-label">供应商名称:</label>
                    <div class="layui-input-inline" style="width: 580px;">
                        <input type="text" name="supName" lay-verify="required"  autocomplete="off" class="layui-input" required="" lay-reqtext="请填写供应商名称">
                    </div>
				</div>
				<div class="layui-form-item">
                    <label class="layui-form-label">供应商类型:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <div class="layui-input-inline" style="width: 230px;">
                            <select name="supType">
                                <option value=""></option>
                                <option value="交易型供应商">交易型供应商</option>
                                <option value="战略型供应商">战略型供应商</option>
                                <option value="大额型供应商">大额型供应商</option>
                                <option value="优先供应商">优先供应商</option>
                            </select>
                        </div>
                    </div>
                    <label class="layui-form-label">所属地区:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <select name="supRegion">
                            <option value=""></option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="湖南">湖南</option>
                        </select>
                    </div>
				</div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联&nbsp;&nbsp;系&nbsp;人:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <input type="text" name="supPeople" lay-verify="required" class="layui-input" required="" lay-reqtext="请填写联系人" autocomplete="off">
                    </div>
                    <label class="layui-form-label">联系电话:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <input type="text" name="supPhone" lay-verify="required" class="layui-input" required="" lay-reqtext="请填写联系电话" autocomplete="off">
                    </div>
                </div>
				<div class="layui-form-item">
					<label class="layui-form-label">联系地址:</label>
					<div class="layui-input-inline" style="width: 582px;">
						<input type="text" name="supAddress" lay-verify="required" class="layui-input" required="" lay-reqtext="请联系地址" autocomplete="off">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">期初应付:</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="username" lay-verify="required" class="layui-input" value="0">
					</div>
				</div>
				<div style="color: red; margin-left: 28px; margin-bottom: 20px;">
					（期初应收：新增此供应商时，我方欠此供应商目前的贷款金额。）
				</div>
				<div class="layui-form-item" style="text-align: center;">
					<button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="addConserve" id="addConserve">保 存</button>
				</div>
			</form>
		</div>
		<!--修改客户-->
		<div id="alterCustomer" style="display: none; padding: 20px;">
			<form class="layui-form" lay-filter="alterCustomer">
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商名称:</label>
                    <div class="layui-input-inline" style="width: 580px;">
                        <input type="text" name="supName" lay-verify="required"  autocomplete="off" class="layui-input" readonly >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商类型:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <div class="layui-input-inline" style="width: 230px;">
                            <select name="supType">
                                <option value=""></option>
                                <option value="交易型供应商">交易型供应商</option>
                                <option value="战略型供应商">战略型供应商</option>
                                <option value="大额型供应商">大额型供应商</option>
                                <option value="优先供应商">优先供应商</option>
                            </select>
                        </div>
                    </div>
                    <label class="layui-form-label">所属地区:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <select name="supRegion" lay-verify="required" required="" lay-reqtext="请选择所属地区" autocomplete="off">
                            <option value=""></option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="湖南">湖南</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联&nbsp;&nbsp;系&nbsp;人:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <input type="text" name="supPeople" lay-verify="required" class="layui-input" required="" lay-reqtext="请填写联系人" autocomplete="off">
                    </div>
                    <label class="layui-form-label">联系电话:</label>
                    <div class="layui-input-inline" style="width: 230px;">
                        <input type="text" name="supPhone" lay-verify="required" class="layui-input" required="" lay-reqtext="请填写联系电话" autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系地址:</label>
                    <div class="layui-input-inline" style="width: 582px;">
                        <input type="text" name="supAddress" lay-verify="required" class="layui-input" required="" lay-reqtext="请填写联系地址" autocomplete="off">
                    </div>
                </div>
				<div class="layui-form-item" style="text-align: center;">
                    <input type="text" name="supId" style="display: none" id="supId">
					<button type="button" class="layui-btn layui-btn-normal" id="alterConserve" lay-submit="" lay-filter="alterConserve">保 存</button>
				</div>
			</form>
		</div>
		<script src="../../layui/layui.js"></script>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			<a class="layui-btn layui-btn-xs" lay-event="alter">修改</a>
		</script>
		<script>
			layui.use(['table', 'jquery', 'form', 'layer'], function() {
				var table = layui.table;
				var $ = layui.jquery;
				var form = layui.form;
				var layer = layui.layer;



				//供应商表格
                var amountInArearCountsMon=0;
				table.render({
					elem: '#customerInfo'
						// ,url: '../../demo/table/user/-page=1&limit=20.js'
						,
					/* data: [], */
					url: '/showSearchSupplierInfoData',
					totalRow: true,
					toolbar: '#btnList',
					width: 1225,
					cols: [
						[{
							field: 'supName',
							width: 155,
							title: '供应商名称',
							unresize: true,
							totalRowText: '合计：<span id="countsAllSupName"></span>',
							align: 'center'
						},{
                            field: 'supPeople',
                            width: 155,
                            title: '联系人',
                            align: 'center'
                        },{
							field: 'supPhone',
							width: 155,
							title: '联系电话',
							align: 'center'
						}, {
							field: 'amountInArear',
							width: 155,
							title: '我方应付金额',
                            totalRowText: '<span id="amountInArearCounts"></span>',
							sort: true,
							align: 'center',
                            templet:function (obj) {
                                if(null!=obj.amountInArear){
                                    amountInArearCountsMon+=obj.amountInArear;
                                    return obj.amountInArear;
                                }else{
                                    amountInArearCountsMon+=0;
                                    return 0;
                                }
                            }
						}, {
							field: 'supAddress',
							width: 155,
							title: '联系地址',
							align: 'center'
						}, {
							field: 'supType',
							width: 155,
							title: '供应商类型',
							align: 'center'
						}, {
							field: 'supRegion',
							width: 155,
							title: '所属地区',
							align: 'center'
						}, {
							field: 'right',
							width: 130,
							align: 'center',
							toolbar: '#barDemo',
							title: '操作',
							fixed: 'right'
						}]
					],
					page: true,
					limits: [10, 15, 20, 25, 50, 100],
					limit: 15,
					done: function(obj) {
					    //为我方应付总金额进行赋值 以及供应商合计赋值
                        $('#amountInArearCounts').html(amountInArearCountsMon);
                        $('#countsAllSupName').html(obj.data.length);
                        amountInArearCountsMon=0;
					}
				});

				//点击增加按钮，弹出增加客户页面
				table.on('toolbar(customerInfo)', function(obj) {
                    //表单重置
                    $('#addCustomer form')[0].reset();
					switch (obj.event) {
						case "add":
							layer.open({
								type: 1,
								title: '<h3 style="text-align: center;color: blue;">增加客户<h3>',
								scrollbar: false, //屏蔽浏览器滚动条
								area: ['58%', '75%'],
								content: $('#addCustomer')
							});
							break;
					}
					
				});
				
				//点击修改按钮，弹出修改客户页面
				table.on('tool(customerInfo)',function(obj){
					switch (obj.event) {
						case "alter":
							layer.open({
								type: 1,
								title: '<h3 style="text-align: center; color: blue;">修改客户<h3>',
								scrollbar: false, //屏蔽浏览器滚动条
								area: ['58%', '58%'],
								content: $('#alterCustomer'),
                                success:function () {
                                    //表单重置
                                    $('#alterCustomer form')[0].reset();
                                    form.val('alterCustomer' , obj.data);
                                    //alert($('#supId').val());
                                }
							});
						    break;
                        case "del":
                            /*$.post("/deleteSupplierInfoData?supId="+obj.data.supId,function (data) {
                                table.reload('customerInfo',{
                                    url: '/showSearchSupplierInfoData'
                                });
                            });*/
                            layer.confirm("您确定要删除吗？",function (data) {
                                $.post("/deleteSupplierInfoData?supId="+obj.data.supId,function (data) {
                                    table.reload('customerInfo',{
                                        url: '/showSearchSupplierInfoData'
                                    });
                                });
								layer.close(data);
                            });
                            break;
					};
					
				});

				/*table.on('tool(customerInfo)',function (obj) {

                });*/

                /*点击增加弹窗内的保存按钮*/
				form.on('submit(addConserve)' , function (obj) {
                    //alert($('#addCustomer form').serialize());
                    $.post("/insertSupplierInfoData?"+$('#addCustomer form').serialize(), function(data){
                        table.reload('customerInfo',{
                            url: '/showSearchSupplierInfoData'
                        });
                    });
                    //表单重置
                    $('#addCustomer form')[0].reset();
                    //关闭弹窗
                    layer.closeAll();
                });

                /*点击修改弹窗内的保存按钮*/
				form.on('submit(alterConserve)',function (obj) {
                    //console.log($('#alterCustomer form').serialize());
                    $.post("/updateSupplierInfoData?"+$('#alterCustomer form').serialize(),function (data) {
                        console.log('aaa')
                        table.reload('customerInfo',{
                            url: '/showSearchSupplierInfoData'
                        });
                    })
                    //关闭弹窗
                    layer.closeAll();
                });



                /*点击根据供应商相关信息进行搜索的搜索按钮*/
                $('#searchInfoBySupplier').on('click',function () {
                    var vendorSearchCriteria=$('#vendorSearchCriteriaData').val();
                    table.reload('customerInfo',{
                        where:{
                            vendorSearchCriteria:vendorSearchCriteria
                        }
                    });

                    //表单重置
                    $('#searchDataSupp')[0].reset();

                });

			});
		</script>
	</body>
</html>
